import { getFreshList } from '@/src/api/Goods';
import React, { useEffect, useState } from 'react';
import { Image, StyleSheet, Text, View } from 'react-native';

interface FreshListProps {
  price: number;
  picture: string;
}
export default function Fresh() {
  const [list, setList] = useState<FreshListProps[]>([]);
  const loadGetFreshListList = async () => {
    const result = await getFreshList();
    console.log('getFreshList----->', result);
    setList(result.data.rows);
  };
  useEffect(() => {
    loadGetFreshListList();
  }, []);
  return (
    <View style={styles.container}>
      {/* 标题 */}
      <View style={styles.tetuituijian}>
        <Image
          style={styles.tetuituijian_title}
          source={require('@/assets/img/home_new.png')}
        ></Image>
      </View>
      {/* 内容 */}
      <View style={styles.tetuituijian_content}>
        {/* 右边商品 */}
        <View style={styles.tetuituijian_goods}>
          {list.slice(0, 4).map((item) => {
            return (
              <View style={styles.tetuituijian_goods_li}>
                <Image
                  style={styles.tetuituijian_img_right}
                  source={{ uri: item.picture }}
                ></Image>
                <Text style={styles.tetuituijian_img_right_title}>
                  ￥{item.price}
                </Text>
              </View>
            );
          })}
        </View>
      </View>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    margin: 5,
    backgroundColor: '#f7eff5',
  },
  tetuituijian_box: {
    width: '100%',
    height: 180,
    borderRadius: 10,
    overflow: 'hidden',
  },
  tetuituijian: {
    padding: 10,
  },
  tetuituijian_title: {
    width: 255,
    height: 30,
  },
  tetuituijian_img: {
    width: 90,
    height: 120,
  },
  tetuituijian_img_left: {
    padding: 6,
  },
  tetuituijian_content: {
    display: 'flex',
    flexDirection: 'row',
  },
  tetuituijian_goods: {
    // backgroundColor: '#f0f',
    display: 'flex',
    alignItems: 'center',
    flexDirection: 'row',
    padding: 8,
    textAlign: 'center',
    flex: 1,
    justifyContent: 'space-around',
    width: 240,
  },
  tetuituijian_goods_li: {
    paddingRight: 5,
    backgroundColor: '#fff',
  },
  tetuituijian_img_right: {
    width: '100%',
    height: 73,
  },
  tetuituijian_img_right_title: {
    fontSize: 14,
    borderRadius: 6,
    paddingTop: 4,
    paddingBottom: 4,
    fontWeight: 'bold',
    width: 73,
    margin: 'auto',
    textAlign: 'center',
    // backgroundColor: '#fe5969',
    color: '#fe5969',
    marginTop: 6,
  },
});
